<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印机配置</title>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        .page-container {
            height: calc(100vh - 40px);
        }

        .main-content {
            height: 100%;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
        }

        .panel {
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        .panel-content {
            height: calc(100% - 50px);
            overflow-y: auto;
        }

        .message-item {
            margin: 5px 0;
            padding: 8px;
            border-radius: 4px;
            background-color: #f5f5f5;
        }

        .message-time {
            color: #666;
            font-size: 0.8em;
        }

        .form-item {
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container class="page-container">
            <el-main class="main-content">
                <el-row :gutter="20" style="height: 100%;">
                    <!-- 左侧面板：串口配置 -->
                    <el-col :span="12" style="height: 100%;">
                        <div class="panel">
                            <h2>打印机调试 <el-button type="text" @click="getPrinters">刷新打印机列表</el-button> </h2>
                            <div class="panel-content">
                                <el-form label-width="100px">
                                    <el-form-item label="打印机">
                                        <el-select v-model="printer.name" placeholder="选择打印机">
                                            <el-option v-for="printer in printers" :key="printer.name"
                                                :label="printer.name" :value="printer.name">
                                            </el-option>
                                        </el-select> <el-button type="primary" @click="printHtml">打印测试页面</el-button>
                                        <el-button type="primary" @click="printPDF">打印PDF</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-col>

                    <!-- 右侧面板：WebSocket监控 -->
                    <el-col :span="12" style="height: 100%;">
                        <div></div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                printerUrl: '',
                printers: [],
                printer: {
                    name: '',
                },
            },
            computed: {
            },
            methods: {
                // 串口方法
                async getPrinters() {
                    try {
                        const response = await fetch(this.printerUrl + '/api/printer/list')
                        const result = await response.json()
                        console.log("result", result);
                        if (result.success) {
                            this.printers = result.data
                            this.$message.success('打印机列表已更新')
                        } else {
                            throw new Error(result.message)
                        }
                    } catch (error) {
                        this.$message.error('获取打印机列表失败: ' + error.message)
                    }
                },
                async printHtml() {
                    try {
                        if (!this.printer.name) {
                            this.$message.error('请选择打印机')
                            return
                        }

                        const htmlText = `
                        <html>
                            <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>打印测试</title>
                            </head>
                            <body>
                                <h1>打印测试</h1>
                                <p>这是一段测试文本。</p>
                            </body>
                        </html>
                        `
                        var urlencoded = new URLSearchParams();
                        urlencoded.append('printerName', this.printer.name);
                        urlencoded.append('htmlText', htmlText);
                        const options = {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body: urlencoded
                        }
                        const response = await fetch(this.printerUrl + '/api/printer/print', options)
                        const result = await response.json()
                        if (result.success) {
                            this.$message.success('打印成功')
                        } else {
                            throw new Error(result.message)
                        }
                    } catch (error) {
                        this.$message.error('打印失败: ' + error.message)
                    }
                },
                async printPDF() {
                    try {
                        if (!this.printer.name) {
                            this.$message.error('请选择打印机')
                            return
                        }

                        const htmlText = `
                        <html>
                            <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>打印测试</title>
                            </head>
                            <body>
                                <h1>打印测试</h1>
                                <p>这是一段测试文本。</p>
                            </body>
                        </html>
                        `
                        var urlencoded = new URLSearchParams();
                        urlencoded.append('name', this.printer.name);
                        urlencoded.append('path', htmlText);
                        const options = {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body: urlencoded
                        }
                        const response = await fetch(this.printerUrl + '/api/printer/printPDF', options)
                        const result = await response.json()
                        if (result.success) {
                            this.$message.success('打印成功')
                        } else {
                            throw new Error(result.message)
                        }
                    } catch (error) {
                        this.$message.error('打印失败: ' + error.message)
                    }
                }
            },
            mounted() {
                this.getPrinters()
            }
        })
    </script>
</body>
</html>
